<template>
    <!-- 滚动区域开始 -->
    <view class="container">
        <z-paging
            ref="paging"
            v-model="groupChatList"
            :scroll-with-animation="true"
            :default-page-size="params.page_size"
            @query="handlerPullRefreshAndMore"
            @scroll="handleScroll"
        >

            <!-- 骨架屏区域开始 -->
            <uv-skeletons :loading="isSkeleton" :skeleton="skeletons"></uv-skeletons>
            <!-- 骨架屏区域结束 -->

            <template #top>
                <!-- 自定义导航区域开始 -->
                <TridentNavBar>
                    <template #left>
                        <!-- #ifdef MP-ALIPAY -->
                        <i class="iconfont icon-zuojiantou" style="font-size: 36rpx;font-weight: bold;"></i>
                        <!-- #else -->
                        <i class="iconfont icon-zuojiantou" style="font-size: 36rpx;"></i>
                        <!-- #endif -->
                    </template>
                    <template #default>选择群聊</template>
                    <template #right>
                        <!-- #ifdef MP-ALIPAY -->
                        <i class="iconfont icon-home" @click="goto('/pages/index/index')" style="font-size: 36rpx;font-weight: bold;"></i>
                        <!-- #else -->
                        <i class="iconfont icon-home" @click="goto('/pages/index/index')" style="font-size: 36rpx;"></i>
                        <!-- #endif -->
                    </template>
                </TridentNavBar>
                <!-- 自定义导航区域结束 -->

                <!-- 搜索区域开始 -->
                <TridentSearch @search="handleSearch"/>
                <!-- 搜索区域结束 -->
            </template>

            <!-- 列表区域开始 -->
            <view class="list-wrap">
                <!-- <template v-if="groupChatList.length > 0"> -->
                    <uni-list-chat
                        v-for="(item, index) in groupChatList" :key="index"
                        :title="item.name"
                        :avatar-list="handleAvatar(item.member)"
                        badge-positon="left"
                        :to="'/pages/chat/index?is_open=1&mode=2&gid=' + item.id"
                    />
                <!-- </template> -->
            </view>
            <!-- 列表区域结束 -->

            <!-- 加载更多提示 -->
            <template #loadingMoreNoMore>
                <view :style=" safeAreaInsets && safeAreaInsets.bottom > 0 ? 'padding-bottom: ' + safeAreaInsets.bottom + 'px': ''" class="no-more-wrap" v-if="totalPage <= params.page  && totalPage > 1">我也是有底线的！</view>
            </template>
        </z-paging>
    </view>
    <!-- 滚动区域结束 -->

    <!-- 返回顶部 -->
    <TridentBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
</template>

<script lang="ts" setup>
import { reqGroupChatListAPI } from '@/apis/groupChat'
import type { GroupChat, GroupChatListParams, Member } from '@/types/groupChat'
import { goto } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app'
import { inject, reactive, ref } from 'vue'



// --------------- 定义全局变量开始 ---------------
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const paging = ref()

// 全局属性
const global: any = inject('global')
onShow(() => {
    for (let index = 0; index < 12; index++) {
        skeletons.push(skeleton as never)
    }
})
// --------------- 定义全局变量结束 ---------------



// --------------- 搜索好友功能开始 ---------------
// 处理搜索
const handleSearch = (e: any) => {
    params.value.name = e.keyword.value
    params.value.page = 1
    groupChatList.value = []
    paging.value.reload()
}
// --------------- 搜索好友功能结束 ---------------



// ------------下拉刷新 + 加载更多开始 ------------
const handlerPullRefreshAndMore = async (pageNo: number, pageSize: number) => {
    params.value.page = pageNo
    await getGroupChat()
}
// ------------下拉刷新 + 加载更多结束 ------------



// ---------------- 处理群聊开始 -----------------
// 群聊列表
const groupChatList = ref<GroupChat[]>([])

// 总条数
const total = ref<number>(0)

// 总页数
const totalPage = ref<number>(0)

// 获取群聊列表参数
const params = ref<GroupChatListParams>({
    is_my: 1,
    name: '',
    page: 1,
    page_size: 10
})

// 获取群聊列表
const getGroupChat = async () => {
    if (params.value.page == 1) {
        isSkeleton.value = true
    }

    // 请求数据
    const result = await reqGroupChatListAPI(params.value)
    total.value = result.data.total
    totalPage.value = result.data.total_page
    paging.value.complete(result.data.group_chats)

    // 隐藏骨架
    isSkeleton.value = false
}
// ---------------- 处理群聊结束 -----------------



// ---------------- 处理头像开始 -----------------
const handleAvatar = (members: Member[]) => {
    const avatarList: any  = []
    members.forEach((member: Member) => {
        if (member.avatar_url) {
            avatarList.push({url: global.FILE_DOMAIN + member.avatar_url})
        } else {
            avatarList.push({url: '/static/images/default_avatar.png'})
        }
    })

    return avatarList
}
// ---------------- 处理头像结束 -----------------



// --------------- 返回顶部功能开始 ---------------
// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
  paging.value.scrollToTop()
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
const handleScroll = (e: any) => {
  isShowBackTop.value = e.detail.scrollTop > 300 ? true : false
}
// --------------- 返回顶部功能结束 ---------------



// --------------- 定义骨架变量开始 ---------------
// 定义是否显示骨架
const isSkeleton = ref(false)

// 定义骨架参数
const skeleton = reactive({
  type: 'flex',
  num: 1,
  style: 'padding: 15rpx 30rpx 15rpx 25rpx;background-color: #fff;border-bottom: 2rpx solid #f6f6f6;',
  children: [
    // 图片区域
    {
      type: 'custom',
      num: 1,
      style: 'width: 85rpx;height: 85rpx;border-radius: 10rpx;margin-right: 15rpx;'
    },

    // 文本区域
    {
      type: 'custom',
      num: 1,
      style: ['width: 120rpx;height: 35rpx;margin-top: 10rpx;']
    }
  ]
})
const skeletons = reactive([])
// --------------- 定义骨架变量结束 ---------------
</script>

<style scoped lang="scss">
.container {
    .no-more-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx 0;
        color: #c3c0c0;
    }
}
</style>